<template>
  <div class="home">
    <!--1.  顶部区域布局---------- -->
    <div class="header">
      <div class="item">
        总销售额
        <div class='num'>{{allData.totalTurnover}}</div>
        <div class="bottom">今日销售额：{{allData.turnover}}</div>
      </div>
      <div class="item">总用户量
        <div class='num'>{{allData.allUsers}}</div>
         <div class="bottom">新增用户：{{allData.newUsers}}</div>
      </div>
      <div class="item">总订单数
        <div class='num'>{{allData.allOrderCount}}</div>
         <div class="bottom">今日订单数：{{allData.orderCount}}</div>
      </div>
      <div class="item">总支付量
        <div class='num'>{{allData.totalPayCount}}</div>
         <div class="bottom">今日支付量：{{allData.payCount}}</div>
      </div>
    </div>

      <!--2. 访问数据统计 ----------------->
      <div class="content">
      <div class="time-info" id='box13'>
        <div class="title">近七日销售额销售额</div>
        <div id="charts" style="width: 800px; height: 300px"></div>
      </div>
      <div class="area" id="box1" style="width: 100%; height: 300px">比例分配</div>
    </div>


    <!-- 3.  -->
     <!-- 最新内容 -->
     <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">今日订单数</div>
              <div>{{allData.orderCount}}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">今日有效订单</div>
             <div>{{allData.validOrderCount}}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">今日金额</div>
             <div>￥{{allData.turnover}}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">本月总订单数</div>
              <div>{{allData.monthOrderCount}}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">本月有效订单</div>
             <div>{{allData.monthValidOrderCount}}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">本月营业额</div>
             <div>￥{{allData.monthTurnover}}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>店铺名: {{storeStatus.shop_name}}</span>
          <span class="address">店铺地址: {{ storeStatus.shop_address }}</span>
        </div>
        <div class="text item">
          <el-button type="warning" v-if="this.storeStatus.status==1" icon="el-icon-dish-1" @click="changeStatus(0)">闭店</el-button>
          <el-button type="success" v-if="this.storeStatus.status==0" icon="el-icon-dish-1" @click="changeStatus(1)">营业</el-button>
          <el-button @click="changeStoreInfo">修改店铺信息</el-button>
        </div>
      </el-card>
    </div>
    <el-dialog title="修改店铺信息" :visible.sync="dialogVisible">
      <div class="dialogContent">
        <el-form
            :model="storeStatus"
            :rules="rules" ref="ruleForm"
        >
            <el-form-item label="店铺名称" prop="name">
                <el-input v-model="storeStatus.shop_name"></el-input>
            </el-form-item>
            <el-form-item label="店铺地址" prop="address">
                <el-input v-model="storeStatus.shop_address"></el-input>
            </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChange">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios' 
// import axios from 'axios' 
    export default{
      data(){
        return{
          allData:{},
          xData:[],
          yData:[],
          storeStatus:'',
          dialogVisible:false,
          ruleForm:{
                name:'',
                address:''
            },
          rules:{
                shop_name: [
                    { required: true, message: '请输入店铺名称', trigger: 'blur' },
                ],
                shop_address: [
                    { required: true, message: '请输入店铺地址', trigger: 'blur' },
                ],
            },
        }
      },
      methods:{
        changeStatus(status){
          axios({
            url:`http://localhost:8080/kfc/admin/shop/status?id=${this.storeStatus.id}&status=${status}`,
            method:'get',
            headers:{
              token:localStorage.getItem('jwt')
            }
          }).then(res=>{
            if(res.status==200){
              axios({
                url:'http://localhost:8080/kfc/admin/shop',
                method:'get',
                headers:{
                  token:localStorage.getItem('jwt')
                }
              }).then(res=>{
                this.storeStatus=res.data.data
                console.log(this.storeStatus);
              })
            }
          })
        },
        changeStoreInfo(){
          this.dialogVisible = true
        },
        confirmChange(){
          axios({
            url:'http://localhost:8080/kfc/admin/shop/update',
            method:'post',
            headers:{
              token:localStorage.getItem('jwt')
            },
            data:{
              id:1,
              shop_name:this.storeStatus.shop_name,
              shop_address:this.storeStatus.shop_address
            }
          }).then(res=>{
            if(res.status==200){
              this.$notify({
                title: '成功',
                message: '成功修改店铺信息',
                type: 'success'
              })
              this.dialogVisible=false
            }
          })
        },
        change(){
          this.$forceUpdate()
        }
      },
      created(){
        // axios({
        //   url:'http://localhost:8080/polycystic/workspace/businessData',
        //   method:'get',
        //   headers:{
        //     token:localStorage.getItem('jwt')
        //   }
        // }).then(res=>{
        //   console.log(res.status);
        //   if(res.status!=200){
        //     this.$router.replace({
        //       name:'login'
        //     })
        //   }
        //   else{
        //     console.log(res.data.data);
        //   }
        // })
        // axios({
        //   url:'http://localhost:8080/kfc/admin/workspace/data',
        //   method:'get',
        //   headers:{
        //     token:localStorage.getItem('jwt')
        //   }
        // }).then(res=>{
        //   console.log(res.data.data);
        //   this.allData=res.data.data
        //   for(let i=0;i<this.allData.turnoverList.length;i++){
        //     this.xData.push(this.allData.turnoverList[i].date)
        //     this.yData.push(this.allData.turnoverList[i].turnover)
        //   }
        //   // this.xData=this.allData.turnoverList
        //   console.log(this.xData);
        // })
      },
      mounted(){
        axios({
          url:'http://localhost:8080/kfc/admin/shop',
          method:'get',
          headers:{
            token:localStorage.getItem('jwt')
          }
        }).then(res=>{
          this.ruleForm.name=res.data.data.shop_name
          this.ruleForm.address=res.data.data.shop_address
          this.storeStatus=res.data.data
        })
        axios({
          url:'http://localhost:8080/kfc/admin/workspace/data',
          method:'get',
          headers:{
            token:localStorage.getItem('jwt')
          }
        }).then(res=>{
          this.allData=res.data.data
          console.log(this.allData);
          for(let i=0;i<this.allData.turnoverList.length;i++){
            this.xData.push(this.allData.turnoverList[i].date)
            this.yData.push(this.allData.turnoverList[i].turnover)
          }
          // this.xData=this.allData.turnoverList
          var myChart = echarts.init(document.getElementById('charts'));
          myChart.setOption({
            // title:{
            //   text:'今日销售情况'
            // },
            tooltip:{},
            xAxis:{//x轴数据
              data:this.xData
            },
            yAxis:{
              //y轴会自动创建数据
            },
            series:[//图表内容
              {
                name:'销量',
                type:'bar',//柱状图
                data:this.yData
              }
            ]
          })
          var myBox=echarts.init(document.getElementById('box1'))
          myBox.setOption({
            series: [
              {
                type: 'pie',
                data: [
                  {
                    value: this.allData.toGo,
                    name: '外带'
                  },
                  {
                    value: this.allData.canteen,
                    name: '堂食'
                  }
                ]
              }
            ]
          })
        })
      }
    }
</script>

<style lang="less" scoped>
.header {
  display: flex;
  padding-right: 30px;
  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    position: relative;
    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }
    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }
  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }
  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }
  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }
  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}


.content {
  margin: 20px;
  display: flex;
  height: 320px;
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }
  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}

.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;
  .box-card {
    flex: 1;
    margin-right: 30px;
    span {
      font-weight: 600;
    }
  }
  .item{
    text-align: center;
    font-size: 24px;
    color: #333;
    .el-col{
      border-right: 1px solid #eee;

    }
    .el-col:last-child{
      border-right: none;
    }
    .title{
      margin-bottom: 10px;
      font-size: 14px;
    }
  }
}
.address{
  margin-left: 20px;
}
.dialogContent{
  display: flex;
  flex-direction: column;
  .name,.address{
    display: flex;
    align-items: center;
  }
  .address{
    margin-left: 0;
  }
}
</style>